<template>
    <div class="shop">
        <div>
            <indexCarousel :carouselAuto="carouselAuto"></indexCarousel>
            <image @click="go1()" class="fixedMenu" style="width:40px;height:40px;" src="../web/img/shop_banner_return.png"></image>
        </div>
        <div class="shopMsg">
            <div class="shopMsgs">
                <image :src="shopMsg.img" style="width:138px;height:138px;border-radius: 50%;"></image>
                <div class="msg">
                    <text class="name">{{shopMsg.title}}</text>
                    <text class="time">营业时间：{{shopMsg.starttime}}-{{shopMsg.endtime}}</text>
                    <div class="pathAndDistance">
                        <text class="path">{{shopMsg.path}}</text>
                        <div class="distance">
                            <image style="width:22px;height:28px;margin-left:104px;" src="../web/img/local.png"></image>
                            <text class="mi"> < {{shopMsg.mi}}m</text>
                        </div>
                    </div>
                </div>
            </div>
            <div class="other">
                <div class="contactInformation">
                    <image style="width:32px;height:32px;margin-right:22px;" src="../web/img/shop_contactus.png"></image>
                    <text class="txt">联系客户</text>
                </div>
                <div class="goToShop">
                    <image style="width:32px;height:32px;margin-right:22px;" src="../web/img/shop_navigation.png"></image>
                    <text class="txt">导航去门店</text>
                </div>
            </div>
        </div>
        <div v-for="i in classAndGoods" class="classAndGoods">
            <text class="title">{{i.title}}</text>
            <div @click="go2()" v-for="s in i.goodsMsg" class="goods">
                <image :src="s.img" style="width:214px;height:182px;"></image>
                <div class="texts">
                    <text class="goodsName">{{s.goodsName}}</text>
                    <div class="goodsDitels">
                        <text class="goodsPrice">￥{{s.goodsPrice}}</text>
                        <text class="goodsSellNum">{{s.goodsSellNum}}人付款</text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import indexCarousel from "../src/components/indexPage/indexCarousel"
    export default {
        name: "shop",
        data(){
            return{
                carouselAuto:false,
                shopMsg:{
                    img:"../web/img/logo.png",
                    title:"拖拉机美容专业点",
                    starttime:"08:00",
                    endtime:"16:00",
                    path:"陕西省西安市高新区222号",
                    mi:"169",
                },
                classAndGoods:[
                    {
                        title:"加油站",
                        goodsMsg:[
                            {
                                img:"../web/img/shop_store_tab_index.png",
                                goodsName:"xx牌的拖拉机轮胎、手扶拖拉机轮胎",
                                goodsPrice:"16",
                                goodsSellNum:"555"
                            },
                            {
                                img:"../web/img/shop_store_tab_index.png",
                                goodsName:"xx牌的拖拉机轮胎、手扶拖拉机轮胎",
                                goodsPrice:"12",
                                goodsSellNum:"555"
                            },
                            {
                                img:"../web/img/shop_store_tab_index.png",
                                goodsName:"xx牌的拖拉机轮胎、手扶拖拉机轮胎",
                                goodsPrice:"123",
                                goodsSellNum:"555"
                            },
                        ]
                    },
                    {
                        title:"加油站",
                        goodsMsg:[
                            {
                                img:"../web/img/shop_store_tab_index.png",
                                goodsName:"xx牌的拖拉机轮胎、手扶拖拉机轮胎",
                                goodsPrice:"16",
                                goodsSellNum:"555"
                            },
                            {
                                img:"../web/img/shop_store_tab_index.png",
                                goodsName:"xx牌的拖拉机轮胎、手扶拖拉机轮胎",
                                goodsPrice:"546",
                                goodsSellNum:"555"
                            },
                            {
                                img:"../web/img/shop_store_tab_index.png",
                                goodsName:"xx牌的拖拉机轮胎、手扶拖拉机轮胎",
                                goodsPrice:"1246",
                                goodsSellNum:"555"
                            },
                        ]
                    },
                ],


            }
        },
        components:{
            indexCarousel
        },
        methods:{
            // header返回点击
            go1(){
                this.$router.back(-1);
            },
            // 商品跳商品页
            go2(){
                // this.$router.push("/goodsServe");
                this.$router.push("/goodsSell");
            },
        },
        updated(){
        },
    }
</script>

<style scoped>
    .goodsSellNum{
        color:#999;
        font-size: 26px;
    }
    .goodsPrice{
        color:red;
        font-size: 34px;
    }
    .goodsDitels{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .goodsName{
        margin-top:8px;
        font-size: 26px;
        color:#666;
        font-weight: 600;
        line-height: 40px;
        flex-wrap: wrap;
        display: block;
        white-space: wrap;
        width:450px;
        letter-spacing: 3px;
    }
    .texts{
        margin-left:22px;
        justify-content: space-between;
    }
    .title{
        text-align: center;
        font-size: 30px;
        color:#33c179;
        font-weight: 600;
    }
    .classAndGoods{
        margin-top:24px;
        padding:0 25px;
        padding-top:24px;
        border-top:16px solid #eee;
    }
    .goods{
        flex-direction: row;
        margin-top:60px;
    }
    .goToShop{
        flex-direction: row;
        align-items: center;
    }
    .contactInformation{
        flex-direction: row;
        align-items: center;
    }
    .txt{
        font-size: 28px;
        font-weight: 600;
        color:#444;
    }
    .path{
        font-size: 26px;
        color:#666;
    }
    .distance{
        flex-direction: row;
        align-items: center;
        width:100%;
    }
    .mi{
        font-size: 26px;
        color:#666;
    }
    .pathAndDistance{
        flex-direction: row;
        justify-content: space-between;
        width:100%;
    }
    .time{
        font-size: 24px;
        color:#666;
        line-height: 46px;
    }
    .name{
        letter-spacing: 4px;
        font-weight: 600;
        line-height:50px;
        font-size: 30px;
    }
    .msg{
        margin-left:28px;
        width:100%;
    }
    .other{
        flex-direction: row;
        width:100%;
        margin-top:40px;
        justify-content: space-around;
        align-items: center;
    }
    .shopMsgs{
        flex-direction: row;
        width:100%;
    }
    .shopMsg{
        margin:60px 25px 0;
    }
.fixedMenu{
    position: absolute;
    left:35px;
    top:40px;
}
    .shop{
        overflow: scroll;
        overflow-x: hidden;
        height:100%;
        padding-bottom:45px;
    }
</style>